<template>
  <div class="productProNew">
    <div class="title"><h1><span>编辑</span></h1></div>
    <form name="newContent" class="basicInfor">
      <div class="form-group required">
        <label :for="'customerName'+$attrs.text">姓名：</label>
        <input autocomplete="off" type="text" class="form-control proName" :id="'customerName'+$attrs.text" placeholder="请输入姓名" required v-model="postDatas.name" />
      </div>
      <div class="form-group required">
        <label :for="'customerPhone`'+$attrs.text">电话：</label>
        <input autocomplete="off" type="number" min="1" class="form-control proName" :id="'customerPhone`'+$attrs.text" placeholder="请输入电话" v-model="postDatas.mobile" />
      </div>
      <div class="form-group required">
        <label :for="'customerGender`'+$attrs.text">性别：</label>
        <select placeholder="请选择性别" class="select" v-model="postDatas.gender" :id="'customerGender`'+$attrs.text">
          <option>男</option>
          <option>女</option>
        </select>
      </div>
      <div class="form-group required">
        <label :for="'customerRank`'+$attrs.text">客户级别：</label>
        <input autocomplete="off" type="number" maxlength="1" min="1" max="5" class="form-control proName" :id="'customerRank`'+$attrs.text" placeholder="请输入客户级别" v-model="postDatas.rank" />
        <span class="g-tips">（请填写1~5之间的整数）</span>
      </div>
      <div class="form-group required">
        <label :for="'customerArea`'+$attrs.text">地区：</label>
        <input autocomplete="off" type="text" class="form-control proName" :id="'customerArea`'+$attrs.text" placeholder="请输入地区" v-model="postDatas.area" />
      </div>
      <div class="form-group required">
        <label class="destxt" :for="'occupation'+$attrs.text">职业：</label>
        <input autocomplete="off" type="text" class="form-control proName" :id="'occupation'+$attrs.text" placeholder="请输入职业" required v-model="postDatas.occupation" />
      </div>
      <div class="form-group required">
        <label class="destxt" :for="'idSn'+$attrs.text">身份证编号：</label>
        <input autocomplete="off" type="text" class="form-control proName" :id="'idSn'+$attrs.text" placeholder="请输入身份证编号" required v-model="postDatas.idSn" />
      </div>
      <div class="form-group required">
        <label class="destxt" :for="'passportSn'+$attrs.text">护照编号：</label>
        <input autocomplete="off" type="text" class="form-control proName" :id="'passportSn'+$attrs.text" placeholder="请输入护照编号" required v-model="postDatas.passportSn" />
      </div>
      <div class="form-group required">
        <label class="destxt" :for="'xchSn'+$attrs.text">行程编号：</label>
        <input autocomplete="off" type="text" class="form-control proName" :id="'xchSn'+$attrs.text" placeholder="请输入行程编号" required v-model="postDatas.xchSn">
      </div>
      <div class="form-group">
        <label class="destxt" :for="'remark'+$attrs.text">备注：</label>
        <textarea class="form-control proDes" :id="'remark'+$attrs.text" rows="6" placeholder="请输入备注信息" v-model="postDatas.demo"></textarea>
      </div>
      <button type="button" class="btn btn-info confirmBtn" @click="submitPro()">提交</button>
    </form>
  </div>
</template>
<script>

  export default {
    data(){
      return{
        detailHttp: '',
        editHttp: '',
        postDatas:{}
      }
    },
    computed:{
      customerView(){//
        return this.$store.state.interface.customerView;
      },
      editCustomer () {
        return this.$store.state.interface.addCustomer;
      }
    },
    components:{},
    methods:{
      submitPro(){ //提交判断是否信息完整
        let self = this;
        let isMobile = /^(13|14|15|17|18)\d{9}$/
        if (self.postDatas.name === '') {
          layer.msg('请填写姓名！');
          return false
        }
        if (!isMobile.test(self.postDatas.mobile)) {
          layer.msg('请填写11位有效手机号');
          return false
        }
        if (self.postDatas.gender === '') {
          layer.msg('请选择性别！');
          return false
        }
        if (self.postDatas.rank === '') {
          layer.msg('请填写等级！');
          return false
        }
        if (isNaN(self.postDatas.rank * 1)) {
          layer.msg('等级应为1~5的数字！');
          return false
        }
        if (self.postDatas.area === '') {
          layer.msg('请填写地区！');
          return false
        }
        if (self.postDatas.occupation === '') {
          layer.msg('请填写职业！');
          return false
        }
        if (self.postDatas.idSn === '') {
          layer.msg('请填写身份证编号！');
          return false
        }
        if (self.postDatas.passportSn === '') {
          layer.msg('请填写护照编号！');
          return false
        }
        if (self.postDatas.xchSn === '') {
          layer.msg('请填写行程编号！');
          return false
        }

        let formData =new FormData(); // 基础信息表单数据
        formData.append('id', self.postDatas.id);
        formData.append('name', self.postDatas.name);
        formData.append('mobile', self.postDatas.mobile);
        formData.append('gender', self.postDatas.gender);
        formData.append('rank', self.postDatas.rank);
        formData.append('area', self.postDatas.area);
        formData.append('occupation', self.postDatas.occupation);
        formData.append('idSn', self.postDatas.idSn);
        formData.append('passportSn', self.postDatas.passportSn);
        formData.append('xchSn', self.postDatas.xchSn);
        formData.append('status', self.postDatas.status);
        formData.append('demo', self.postDatas.demo);
        self.$ajax.post(self.editHttp,formData).then(function(res) {
          let result = res.data.result || '';
          if(res.data.code === '10000' && result.WbKefuData){
            layer.msg('修改成功！');

          }else{
            self.codes(res.data.code);
            layer.msg('修改失败！');
          }
        },function(res) {
          layer.msg('修改失败！');
        });
      }
    },
    beforeMount(){
      let self = this;
      let editUrl = self.editCustomer;
      let sessionId = JSON.parse(sessionStorage.getItem('customer')).sid;
      self.editHttp = `${editUrl}?sid=${sessionId}`;
      self.detailHttp = `${self.customerView}?sid=${sessionId}`;
      self.$ajax.post(`${self.detailHttp}&id=${self.$attrs.proid}`).then(function(res) {
        if(res.data.code === '10000' ){
          self.postDatas=res.data.result.WbKefuData;
        }else{
          layer.msg('加载失败！');
        }
      },function(res) {
        layer.msg('服务器错误！');
      });
    },
    mounted(){}
  }
</script>
<style lang="scss" scoped>
  form{
    display:block;
  }
  .title{
    color:#4e5e7e;
  }
  .form-control.like-textarea, .form-control.proDes, .form-group .mainImg{
    width: 70%;
  }
  .g-tips{margin-left:10px;color:#999;}
  .select{width: 150px;height: 34px;}
</style>
